<!DOCTYPE html>
<html>
<head lang="zh">
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
    <meta http-equiv="content-type" content="text/html">
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="Cache-Control" content="no-cache,must-revalidate"/>
    <meta http-equiv="expires" content="Wed,26 Feb 1997 08:21:57 GMT"/>
    <title>摄影</title>
    <style type="text/css">
        /* reset */
        body, h1, h2, h3, h4, h5, h6, p, dl, dd, ul, ol, pre, form, input, textarea, th, td, select, strong {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #270b0c;
        }

        em {
            font-style: normal;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none !important;
        }

        img {
            border: none;
            vertical-align: top;
        }

        table {
            border-collapse: collapse;
        }

        textarea {
            resize: none;
            overflow: auto;
        }

        img {
            max-width: 100%;
            border: none;
        }

        /* end reset */
        /*私有样式*/
        .header-banner {
            width: 100%;
            height: 3.90rem;
        }

        .header-banner img {
            width: 100%;
            border: 0;
        }

        .header-banner p {
            font-size: .27rem;
            color: #d88f70;
            position: absolute;
            top: .83rem;
            left: .43rem;
        }

        .box-tex {
            height: 2.6rem;
            background: #270b0c;
            padding: .25rem .3rem 0 .3rem;
            line-height: .27rem;
            border-bottom: 1px solid #525252;
        }

        .box-tex p {
            font-size: .16rem;
            color: #fff;
            text-align: justify;
        }

        .box-tex span {
            color: #d88749;
        }

        .box-tex > div {
            width: 100%;
            text-align: center;
            padding-top: .4rem;
        }

        .box-tex a {
            padding: .08rem .45rem;
            border: 1px solid #ccc;
            color: #d08749;
            text-align: center;
            vertical-align: middle;
            font-size: .16rem;
            background: #fff;
            border-radius: 4px;
        }

        .box-explain {
            margin: 0 auto;
            width: 90%;
            padding-top: .31rem;
            font-size: .155rem;
            color: #270b0c;
        }

        .bt {
            border: none;
        }

        .box-explain h4 {
            font-size: .155rem;
            color: #fff;
            margin-bottom: .14rem;
            font-weight: normal;
        }

        .box-explain .time-cl {
            color: #d08749;
            margin-bottom: .38rem;
        }

        .box-explain > p {
            font-size: .155rem;
            line-height: .25rem;
            text-align: justify;
            color: #f2f2f2;
        }

        .box-explain > p:last-child {
            margin-bottom: .36rem;
        }

        .box-explain .gift p:first-child {
            width: 50%;
            float: left;
            padding-left: .4rem;
        }

        .box-explain .gift p:last-child {
            width: 50%;
            float: left;
            text-align: right;
            padding-right: .4rem;
        }

        .gift {
            color: #d5b968;
            margin-bottom: .2rem;
        }

        .to {
            color: #888888;
        }

        .gift:after {
            clear: both;
            content: "";
            display: table;
        }

        .gift p img {
            width: .2rem;
        }

        .gift b {
            color: red;
        }

        .prize {
            line-height: .25rem;
            padding: .2rem 0 .4rem 0;
        }

        .prize > p {
            color: #f2f2f2;
        }

        .code {
            text-align: center;
            background: #f2f2f2;
            font-size: .1555rem;
        }

        .code P:first-child {
            padding: .3rem 0 .15rem 0;
        }

        .code p:last-child {
            padding: .15rem 0 .3rem 0;
        }

        #list_box {
            height: 5.4rem;
            position: relative;
            background: url("img/spend.png") no-repeat center center;
            background-size: 90%;
            margin-top: .4rem;
        }

        .list-ht {
            color: #d5b968;
            text-align: center;
            padding-bottom: .15rem;
            position: relative;
            top: -0.3rem;
        }

        .list-ht span {
            color: #8c7b6f;
            width: .5rem;
            display: inline-block;
            vertical-align: middle;
            height: .01rem;
            /*background: linear-gradient(to right, transparent, #ffdfb0, transparent);*/
            background: #ffdfb0;
        }

        .list-ht b {
            font-weight: normal;
            padding: 0 .1rem;
            font-size: .155rem;
        }

        #list_box b:nth-child(2) img {
            float: right;
            transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
        }

        #list_box b:nth-child(3) img {
            position: absolute;
            bottom: 0;
            left: 0;
            transform: rotate(270deg);
            -ms-transform: rotate(270deg);
            -o-transform: rotate(270deg);
            -webkit-transform: rotate(270deg);
            -moz-transform: rotate(270deg);
        }

        #list_box b:nth-child(4) img {
            float: right;
            transform: rotate(180deg);
            -ms-transform: rotate(180deg); /* IE 9 */
            -moz-transform: rotate(180deg); /* Firefox */
            -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
            -o-transform: rotate(180deg);
            position: absolute;
            bottom: 0;
            right: 0;
        }

        .cl {
            color: #dedee2;
        }
    </style>
    <script>!function (n, e) {
        var t = n.documentElement, i = "orientationchange" in window ? "orientationchange" : "resize", d = function () {
            var n = t.clientWidth;
            if (n) {
                var e = 100 * (n / 375);
                t.style.fontSize = e + "px"
            }
        };
        n.addEventListener && (e.addEventListener(i, d, !1), n.addEventListener("DOMContentLoaded", d, !1))
    }(document, window); </script>
</head>
<body>
<div class="header-banner">
    <img src="img/photo.jpg" alt=""/>

    <p>欢乐中秋纪实</p>
</div>
<div class="box-tex">
    <p>又到一年月圆时，月到中秋分外圆！为充分展现中秋佳节的浓厚节日气氛和月圆之夜的美好画卷，深圳华中物业管理有限公司协同广州列丰信息科技有限公司特邀请<span class="village"></span>业主参与“欢乐中秋”纪实摄影活动。
    </p>

    <div id="join"><a class="btn" href="javascript:;">我要参与</a></div>
</div>
<div class="box-explain">
    <h4>评选时间</h4>

    <p class="time-cl">2016年9月15日(中秋节)-2016年9月25日</p>
    <h4>活动说明</h4>

    <p>1、作品以中秋文化、各地中秋文化习俗、中秋月圆风光为主。</p>

    <p>2、作品为2016年9月15日至2016年9月19日期间创作。</p>

    <p>3、作品须原创，网摘、转载等不行哦，彩色图片为宜，数量5张内即可。</p>
</div>
<div class="box-explain bt">
    <h4>评选方式</h4>

    <p>本次赛事采取业主集赞方式，名次排列以集赞数量依次排列，攒人气哦。</p>
    <div id="list_box">
        <b><img src="img/file.png" alt=""/></b>
        <b><img src="img/file.png" alt=""/></b>
        <b><img src="img/file.png" alt=""/></b>
        <b><img src="img/file.png" alt=""/></b>
        <div class="list-ht"><span></span><b>当前前10名单</b><span></span></div>
    </div>
    <div class="prize">
        <p>分为金奖、银奖、铜奖三种奖项，具体获奖人数以小区活动通知为准</p>
    </div>

</div>
<div class="code">
    <p>指点下载二维码</p>
    <img src="img/scan.png" alt=""/>

    <p>祝大家中秋快乐，阖家欢乐！</p>
</div>
<script>
    var liefeng = {};
</script>
<script src="//cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>
<script type="text/javascript" src="../../zhwy-hybrid/public/js/lib/common.min.js"></script>

<!--<script type="text/javascript" src="../common.min.js"></script>-->
<!--测试使用的-->

<!--TODO 需要迪迪要改，目前不支持https-->
<!--<script src="//h5.liefengtech.com/zhwy-hybrid/public/js/lib/common.min.js"></script> -->

<script type="text/javascript">
    window.onload = function () {
        var projectName = '',
            getHouseUrl = '/api/finger/household/getUserHouses',
            getListUrl = '/api/finger/third/sns/getWeiBoSupport',
            doAction = lf.bridgeJs.doAction;

        var prefix = lf.prod ?
            'http://property.prod.liefengtech.com' :
            'http://property.test.liefengtech.com';

        lf.bridgeJs.getUser(function (user) {
            lf.utils.ajax({
                type: 'get',
                url: lf.utils.getProtocol(prefix + getHouseUrl),
                data: {
                    globalId: user.globalId
                },
                success: function (data) {
                    console.log(data);
                    $.each(data.dataList, function () {
                        if (this.projectId == user.projectId) {
                            projectName = this.projectName;

                            console.log(this.projectName);
                            console.log(this.projectId);

                            var $text_cell = $(".village");
                            $text_cell.text(projectName);
                        }
                    })
                }
            })
            lf.utils.ajax({
                type: 'GET',
                url: lf.utils.getProtocol(prefix + getListUrl),
                data: {
                    projectId: user.projectId,
                    content: '欢乐中秋'
                },
                dataType: 'json',
                success: function (data) {
                    var $list_box = $("#list_box");
                    $(data.dataList).each(function (i, item) {
                        if (i <= 0) {
                            $list_box.append("<div class='gift'><p><b><img src='img/cup.png'></b>&nbsp;<span class='place'>" +
                                item.nickname + "</span></p><p class='help'>" +
                                item.support + "</p></div>"
                            );
                        } else if (i > 0 && i <= 2) {
                            $list_box.append("<div class='gift'><p><img src='img/cup2.png'>&nbsp;<span class='place'>" +
                                item.nickname + "</span></p><p class='help'>" +
                                item.support + "</p></div>"
                            );
                        } else if (i > 2 && i <= 5) {
                            $list_box.append("<div class='gift'><p><img src='img/cup3.png'>&nbsp;<span class='place'>" +
                                item.nickname + "</span></p><p class='help'>" +
                                item.support + "</p></div>"
                            );
                        } else if (i > 5 && i < 10) {
                            $list_box.append("<div class='gift to'><p>" +
                                0 + (i * 1 + 1) + "&nbsp;<span class='place'>" +
                                item.nickname + "</span></p><p class='help'>" +
                                item.support + "</p></div>"
                            );
                        }
                    })
                },
                error: function () {
                    console.log('ajax错误');
                }
            });
            $('.btn').on('click', function () {
                var url = lf.snsPrefix + "/sns/index.php?s=/mob/weibo/addweibo.html",
                    title = '来吐槽';
                doAction(url, title);
            })
        })
    }
</script>
</body>
</html>
